{% extends "tj3/tj3.html" %}

{% block navigation %}
	<script type="text/javascript">
		$('document').ready(function(){
			$('#id_form-0-when').datepicker();
		});
	</script>
{% endblock navigation %}


{% block content  %} 

<h1 class="ui-widget ui-widget-header">{{task.project.name}}/{{task.name}} by {{booking.resource.first_name|capfirst}} {{booking.resource.last_name|capfirst}}
<span class="float_right">Editing Booking</h1>

<div class="ui-widget ui-widget-content">
	<form action="." method="post" enctype="multipart/form-data">

	<div class="mycontent">
		<div>
		<!--- iterate exist bookings --->
		<table>
			<tbody>
				{{ booking_formset.management_form }}
				{{ booking_formset }}
			</tbody>
		</table>
		</div>
		<div class="float_right">
			<input type="submit" name="command" value="Update" class="button" />
			<input type="submit" name="command" value="Delete" class="button" />
		</div>
	</div>
	
	<div class="mycontent">
		<h2 class="ui-state-highlight">Journals Linked to This Booking
       		<span class="float_right">
            <a href={% url journal_create booking.id%}><span class="ui-icon ui-icon-plusthick" title="Create a new journal"></span></a>
           	</span>
		</h2>
		{% regroup journals by created as journal_list %}
		{% for j in journal_list %}
			<div>
				<span class="ui-icon ui-icon-pin-s" style="float: left; margin-right: .3em;"></span>
				<b>{{j.grouper}}</b>
			</div>
			
			{% for item in j.list %}
				<div class="prefix-1">
					<span class="ui-icon ui-icon-comment" style="float: left; margin-right: .3em;"></span>
					{{item.summary}}
					<a href="{% url journal_delete item.id %}" class="float_right ui-icon ui-icon-trash" title="Delete journal"></a>
					<a href="{% url journal_edit item.id %}" class="float_right ui-icon ui-icon-wrench" title="Edit journal"></a>
				
				<div class="fancy">
					{{item.description}}
				</div>
				</div>
			{% endfor %}
		{% endfor %}
	</div>	
	</form>
</div>
{% endblock content %}
